<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <body>

        <ui:composition template="./../Templates/general2.xhtml">
            <ui:param name="title" value="Administraci&oacute;n de Usuarios"/>

            <ui:define name="extraHead">
                <script type="text/javascript" src="/satk/resources/js/script-registros-base.js" ></script>
                <script type="text/javascript">
                    jQuery(function(){
                       
                        var RU = new Registros.init({
                            listRegistros: "action-usuario",
                            btnReloadList: "#btn-updateList",
                            
                            formRegister: "form-registro",
                            btnOpenRegister: "#btn-openRegistro",
                            msgFormRegister : "Se registro exitosame al usuario",
                            
                            formEdit: null,
                            msgFormEdit: "Se actualizo la informaci&oacute;n del usuario exitosamente"
                        });
                        RU.settings.btnReloadList.click(function(evnt){
                            RU.recargaLista(this, evnt);
                        });
                    });
                </script>
            </ui:define>

            <ui:define name="content">

                <ui:decorate template="/Templates/formGeneral.xhtml">
                    <ui:param name="id" value="form-registro"/>
                    <ui:param name="legend" value="Nuevo Usuario" />

                    <ui:define name="content">
                        <p>
                            <h:outputLabel for="nombre">Nombre de usuario:<span/></h:outputLabel>
                            <h:inputSecret id="nombre" value="#{addUsuarioBeans.news.nombreUsuario}" 
                                           maxlength="15" />
                        </p>
                        <p>
                            <h:outputLabel for="password1" >Contrase&ntilde;a</h:outputLabel>
                            <h:inputSecret id="password1" value="#{addUsuarioBeans.news.password}"
                                           maxlength="16" />
                        </p>
                        <p>
                            <h:outputLabel for="password2" >Repita la contrase&ntilde;a</h:outputLabel>
                            <h:inputSecret id="password2" value="#{addUsuarioBeans.news.password}"
                                           maxlength="16" />
                        </p>
                        <p>
                            <h:outputLabel for="rol">Rol:</h:outputLabel>
                            <h:selectOneMenu id="rol" value="#{addUsuarioBeans.news.rol}"
                                             styleClass=":required :only_on_submit">
                                <f:selectItem itemLabel="Administrador" itemValue="administrador" />
                                <f:selectItem itemLabel="Coordinador" itemValue="coordinador" />
                                <f:selectItem itemLabel="Apoyo" itemValue="apoyo" />
                                <f:selectItem itemLabel="Instituto" itemValue="instituto" />
                            </h:selectOneMenu>
                        </p>
                    </ui:define> <!-- form:content -->
                    
                    <ui:define name="command">
                        <h:commandButton id="guardar" value="Registrar" >
                            <f:ajax event="click" execute="@form" render="@form"
                                    listener="#{addUsuarioBeans.add()}"
                                    onerror="function(ex){Registros.eventRegistro(this, ex);}"
                                    onevent="function(evnt){Registros.eventRegistro(this, evnt);}" />
                        </h:commandButton> <!-- form:command -->
                    </ui:define>

                </ui:decorate> <!-- formGeneral:[form-registro] -->

                <ui:decorate template="/Templates/elms/entradaSimple.xhtml">
                    <ui:param name="id" value="control-usuario"/>

                    <ui:define name="content">
                        <a href="#" id="btn-updateList">Actualizar lista</a>
                        <a href="#" id="btn-openRegistro">Nuevo Usuario</a>
                    </ui:define> <!-- entradaSimple:content -->

                </ui:decorate> <!-- entradaSimple:[control-usuario] -->

                <ui:decorate template="/Templates/elms/entrada.xhtml">
                    <ui:param name="id" value="lista-usuarios"/>
                    <ui:define name="title">Usuario Registrados</ui:define>

                    <ui:define name="content">
                        <h:form id="action-usuario">
                            <h:dataTable id="tabUsuarios" styleClass="ui-table"
                                         value="#{allUsuariosBeans.dataModel}" var="usuario"
                                         rowClasses=", row-inpar">
                                <!-- Columna del número -->
                                <c:set value="#{adminUsuariosBean.dataModel.rowIndex+1}" var="indexRow"/>
                                <h:column>
                                    <f:facet name="header">No.</f:facet>
                                    <h:outputText value="#{indexRow}" />
                                </h:column>

                                <!-- Columna de nombre de usuario -->
                                <h:column>
                                    <f:facet name="header">Nombre</f:facet>
                                    <h:outputText value="#{usuario.nombreUsuario}"/>
                                </h:column>

                                <!-- Columna de roll -->
                                <h:column>
                                    <f:facet name="header">Rol</f:facet>
                                    <h:outputText value="#{usuario.rol}" />
                                </h:column>

                                <!-- Columna comando -->
                                <h:column>
                                    <f:facet name="header">Acci&oacute;n</f:facet>
                                    ...
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </ui:define> <!-- entrada:content -->

                </ui:decorate> <!-- entrada:[usuario registrado] -->

            </ui:define> <!-- content -->

        </ui:composition>

    </body>
</html>
